<style>
  .alert{
    border-radius:0.5rem;
    overflow: hidden;
    background: #fff;
    width:15.75rem;
    height:auto;
    position: fixed;
    top: 27%;
    left: 50%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    z-index: 999999;

  }
  .btnwidth{
    width:100%;
  }
</style>
<template>
  <div>
	<div class="mask" style="opacity:0.2;" v-if="visible">

	</div>
	<div class="alert" v-if="visible">
		<p class="header" style="font-size:0.85rem;margin:0 0 0 0;margin-top:1.3rem;" >{{title}}</p>
		<p class="message" style="font-size:0.8rem;color: #333;margin:0; padding:0.45rem 0.75rem 1.3rem 0.75rem; line-height:1.2rem">{{num}}{{message}}</p>
		<div class="btn-group "v-show="btn" :class="{'col-1':!showCancelButton,'col-2':showCancelButton}">
			<button class="btn secondary"  v-show="cancelButtonShow" @click="handleActions('cancel')">{{cancelButtonText}}</button><button class="btn secondary" v-bind:style="{width: btnwidth}" @click="handleActions('confirm')">{{confirmButtonText}}</button>
		</div>
	</div>
    </div>
</template>
<script>
  var CONFIRM_TEXT = '确定';
  var CANCEL_TEXT = '取消';
	export default{
		name:'Alert',
		props:{

		},
		ready(){

		},
		methods:{
			handleActions(action){
				var callback = this.callback;
        		this.visible = false;
        		callback(action);
			}
		},

		data(){
			return{
				title:'',
				message:'',
				cancelButtonText:CANCEL_TEXT ,
				confirmButtonText:CONFIRM_TEXT,
				showCancelButton: true,
				visible :true,
				btn:true,
				btnwidth:"50%",
				cancelButtonShow:true,
				num:"",
				duration:"",
        activeColor: '#333',
				callback:null
			}
		},

	}
</script>
